Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Customize Expansion Item
We can make an expansion item denser by using the dense and dense-toggle props:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-expansion-item
v-model="expanded"
icon="perm_identity"
label="Settings"
dense
dense-toggle
expand-separator
>
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet
</q-card-section>
</q-card>
</q-expansion-item>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
}
});
</script>
</body>
</html>
We can switch the side the toggle on with the switch-toggle-side prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-expansion-item
v-model="expanded"
icon="perm_identity"
label="Settings"
switch-toggle-side
expand-separator
>
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet
</q-card-section>
</q-card>
</q-expansion-item>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
}
});
</script>
</body>
</html>
We can customize the header by populating the header slot:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-expansion-item
v-model="expanded"
icon="perm_identity"
label="Settings"
>
<template v-slot:header>
<q-item-section avatar>
<q-avatar>
<img src="https://cdn.quasar.dev/img/boy-avatar.png" />
</q-avatar>
</q-item-section>
<q-item-section>
John Doe
</q-item-section>
</template>
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet
</q-card-section>
</q-card>
</q-expansion-item>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
}
});
</script>
</body>
</html>
Floating Action Button
Quasar comes with a floating action button component.
For example, we can use it by writing:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-page-container>
<q-page padding>
<p v-for="n in 15" :key="n">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn fab icon="add" color="accent"></q-btn>
</q-page-sticky>
</q-page>
</q-page-container>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
expanded: false
}
});
</script>
</body>
</html>
We add a q-btn with the fab prop to turn it into a floating action button.
And we put it in the q-page-sticky component so that it sticks to the bottom of the page as indicated by the position prop.
Conclusion
We can add expansion items and floating action buttons into our Vue app with the Quasar library.
